آلة الحالة React Custom Hook: إتقان تجريد منطق الحالة المعقد

مع تزايد تعقيد تطبيقات React، يمكن أن تصبح إدارة الحالة تحديًا كبيرًا. يمكن أن تؤدي الأساليب التقليدية التي تستخدم `useState` و `useEffect` بسرعة إلى منطق متشابك وتعليمات برمجية يصعب صيانتها، خاصة عند التعامل مع انتقالات الحالة المعقدة والتأثيرات الجانبية. هذا هو المكان الذي تأتي فيه آلات الحالة، وتحديدًا خطافات React المخصصة التي تنفذها، لإنقاذ الموقف. ستوجهك هذه المقالة خلال مفهوم آلات الحالة، وتوضح كيفية تنفيذها كخطافات مخصصة في React، وتوضح الفوائد التي تقدمها لبناء تطبيقات قابلة للتطوير والصيانة لجمهور عالمي.

ما هي آلة الحالة؟

آلة الحالة (أو آلة الحالة المحدودة، FSM) هي نموذج رياضي للحساب يصف سلوك النظام من خلال تحديد عدد محدود من الحالات والانتقالات بين تلك الحالات. فكر في الأمر على أنه مخطط انسيابي، ولكن مع قواعد أكثر صرامة وتعريف أكثر رسمية. تتضمن المفاهيم الأساسية ما يلي:

• الحالات: تمثل الظروف أو المراحل المختلفة للنظام.
• الانتقالات: تحدد كيف ينتقل النظام من حالة إلى أخرى بناءً على أحداث أو شروط معينة.
• الأحداث: المشغلات التي تسبب انتقالات الحالة.
• الحالة الأولية: الحالة التي يبدأ فيها النظام.

تتفوق آلات الحالة في تصميم الأنظمة ذات الحالات المحددة جيدًا والانتقالات الواضحة. الأمثلة وفيرة في سيناريوهات العالم الحقيقي:

• إشارات المرور: دورة عبر حالات مثل الأحمر والأصفر والأخضر، مع انتقالات يتم تشغيلها بواسطة المؤقتات. هذا مثال معترف به عالميًا.
• معالجة الطلبات: قد ينتقل طلب التجارة الإلكترونية عبر حالات مثل "معلق" و "قيد المعالجة" و "تم الشحن" و "تم التسليم". ينطبق هذا عالميًا على البيع بالتجزئة عبر الإنترنت.
• تدفق المصادقة: يمكن أن تتضمن عملية مصادقة المستخدم حالات مثل "تم تسجيل الخروج" و "تسجيل الدخول" و "تم تسجيل الدخول" و "خطأ". عادةً ما تكون بروتوكولات الأمان متسقة عبر البلدان.

لماذا تستخدم آلات الحالة في React؟

يوفر دمج آلات الحالة في مكونات React الخاصة بك العديد من المزايا المقنعة:

• تحسين تنظيم التعليمات البرمجية: تفرض آلات الحالة نهجًا منظمًا لإدارة الحالة، مما يجعل التعليمات البرمجية الخاصة بك أكثر قابلية للتنبؤ وأسهل في الفهم. لا مزيد من التعليمات البرمجية السباغيتي!
• تقليل التعقيد: من خلال تحديد الحالات والانتقالات بشكل صريح، يمكنك تبسيط المنطق المعقد وتجنب الآثار الجانبية غير المقصودة.
• تعزيز قابلية الاختبار: آلات الحالة قابلة للاختبار بطبيعتها. يمكنك بسهولة التحقق من أن نظامك يتصرف بشكل صحيح عن طريق اختبار كل حالة وانتقال.
• زيادة قابلية الصيانة: تجعل الطبيعة التعريفية لآلات الحالة من السهل تعديل التعليمات البرمجية الخاصة بك وتوسيعها مع تطور تطبيقك.
• تصورات أفضل: توجد أدوات يمكنها تصور آلات الحالة، مما يوفر نظرة عامة واضحة على سلوك نظامك، مما يساعد في التعاون والفهم عبر الفرق ذات مجموعات المهارات المتنوعة.

تنفيذ آلة الحالة كخطاف React مخصص

دعنا نوضح كيفية تنفيذ آلة الحالة باستخدام خطاف React مخصص. سنقوم بإنشاء مثال بسيط لزر يمكن أن يكون في ثلاث حالات: `idle` و `loading` و `success`. يبدأ الزر في حالة `idle`. عند النقر فوقه، ينتقل إلى حالة `loading`، ويحاكي عملية التحميل (باستخدام `setTimeout`)، ثم ينتقل إلى حالة `success`.

1. تعريف آلة الحالة

أولاً، نحدد حالات وانتقالات آلة حالة الزر الخاصة بنا:

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // After 2 seconds, transition to success
      },
    },
    success: {},
  },
};

يستخدم هذا التكوين نهجًا مستقلاً عن المكتبة (على الرغم من أنه مستوحى من XState) لتحديد آلة الحالة. سنقوم بتنفيذ المنطق لتفسير هذا التعريف بأنفسنا في الخطاف المخصص. تحدد الخاصية `initial` الحالة الأولية على أنها `idle`. تحدد الخاصية `states` الحالات المحتملة (`idle` و `loading` و `success`) وانتقالاتها. تحتوي حالة `idle` على خاصية `on` تحدد انتقالاً إلى حالة `loading` عند حدوث حدث `CLICK`. تستخدم حالة `loading` الخاصية `after` للانتقال تلقائيًا إلى حالة `success` بعد 2000 مللي ثانية (2 ثانية). حالة `success` هي حالة طرفية في هذا المثال.

2. إنشاء الخطاف المخصص

الآن، دعنا ننشئ الخطاف المخصص الذي ينفذ منطق آلة الحالة:

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState({});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Cleanup on unmount or state change
      });
    }
  }, [currentState, stateMachineDefinition.states]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

يأخذ خطاف `useStateMachine` هذا تعريف آلة الحالة كحجة. يستخدم `useState` لإدارة الحالة والسياق الحاليين (سنشرح السياق لاحقًا). تأخذ الدالة `transition` حدثًا كحجة وتحدث الحالة الحالية بناءً على الانتقالات المحددة في تعريف آلة الحالة. يعالج خطاف `useEffect` الخاصية `after`، ويقوم بتعيين مؤقتات للانتقال تلقائيًا إلى الحالة التالية بعد مدة محددة. يعيد الخطاف الحالة الحالية والسياق والدالة `transition`.

3. استخدام الخطاف المخصص في مكون

أخيرًا، دعنا نستخدم الخطاف المخصص في مكون React:

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // After 2 seconds, transition to success
      },
    },
    success: {},
  },
};

const MyButton = () => {
  const { currentState, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    
      {buttonText}
    
  );
};

export default MyButton;

يستخدم هذا المكون خطاف `useStateMachine` لإدارة حالة الزر. تقوم الدالة `handleClick` بإرسال حدث `CLICK` عند النقر فوق الزر (وفقط إذا كان في حالة `idle`). يعرض المكون نصًا مختلفًا بناءً على الحالة الحالية. يتم تعطيل الزر أثناء التحميل لمنع النقرات المتعددة.

التعامل مع السياق في آلات الحالة

في العديد من السيناريوهات الواقعية، تحتاج آلات الحالة إلى إدارة البيانات التي تستمر عبر انتقالات الحالة. تسمى هذه البيانات السياق. يتيح لك السياق تخزين وتحديث المعلومات ذات الصلة مع تقدم آلة الحالة.

دعنا نوسع مثال الزر الخاص بنا ليشمل عدادًا يزداد في كل مرة يتم فيها تحميل الزر بنجاح. سنقوم بتعديل تعريف آلة الحالة والخطاف المخصص للتعامل مع السياق.

1. تحديث تعريف آلة الحالة

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

لقد أضفنا خاصية `context` إلى تعريف آلة الحالة بقيمة `count` أولية تبلغ 0. لقد أضفنا أيضًا إجراء `entry` إلى حالة `success`. يتم تنفيذ إجراء `entry` عندما تدخل آلة الحالة حالة `success`. يأخذ السياق الحالي كحجة ويعيد سياقًا جديدًا مع زيادة `count`. يوضح `entry` هنا مثالاً لتعديل السياق. نظرًا لأن كائنات Javascript يتم تمريرها بالمرجع، فمن المهم إرجاع كائن *جديد* بدلاً من تغيير الكائن الأصلي.

2. تحديث الخطاف المخصص

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState(stateMachineDefinition.context || {});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];

    if(stateDefinition && stateDefinition.entry){
      const newContext = stateDefinition.entry(context);
      setContext(newContext);
    }

    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Cleanup on unmount or state change
      });
    }
  }, [currentState, stateMachineDefinition.states, context]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

لقد قمنا بتحديث خطاف `useStateMachine` لتهيئة حالة `context` باستخدام `stateMachineDefinition.context` أو كائن فارغ إذا لم يتم توفير أي سياق. لقد أضفنا أيضًا `useEffect` للتعامل مع إجراء `entry`. عندما يكون للحالة الحالية إجراء `entry`، فإننا نقوم بتنفيذه وتحديث السياق بالقيمة التي تم إرجاعها.

3. استخدام الخطاف المحدث في مكون

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

const MyButton = () => {
  const { currentState, context, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    

      
        {buttonText}
      
      
Count: {context.count}
    
  );
};

export default MyButton;

يمكننا الآن الوصول إلى `context.count` في المكون وعرضه. في كل مرة يتم فيها تحميل الزر بنجاح، سيزداد العدد.

مفاهيم آلة الحالة المتقدمة

في حين أن مثالنا بسيط نسبيًا، يمكن لآلات الحالة التعامل مع سيناريوهات أكثر تعقيدًا. فيما يلي بعض المفاهيم المتقدمة التي يجب مراعاتها:

• الحراس: الشروط التي يجب استيفاؤها لحدوث انتقال. على سبيل المثال، قد لا يُسمح بالانتقال إلا إذا تم مصادقة المستخدم أو إذا تجاوزت قيمة بيانات معينة حدًا معينًا.
• الإجراءات: الآثار الجانبية التي يتم تنفيذها عند الدخول إلى حالة أو الخروج منها. يمكن أن يشمل ذلك إجراء مكالمات API أو تحديث DOM أو إرسال أحداث إلى مكونات أخرى.
• الحالات المتوازية: تسمح لك بتصميم الأنظمة ذات الأنشطة المتزامنة المتعددة. على سبيل المثال، قد يكون لدى مشغل الفيديو آلة حالة واحدة لعناصر التحكم في التشغيل (تشغيل، إيقاف مؤقت، إيقاف) وأخرى لإدارة جودة الفيديو (منخفضة، متوسطة، عالية).
• الحالات الهرمية: تسمح لك بتداخل الحالات داخل حالات أخرى، مما يؤدي إلى إنشاء تسلسل هرمي للحالات. يمكن أن يكون هذا مفيدًا لتصميم الأنظمة المعقدة ذات الحالات المترابطة العديدة.

المكتبات البديلة: XState والمزيد

في حين أن الخطاف المخصص الخاص بنا يوفر تطبيقًا أساسيًا لآلة الحالة، إلا أن هناك العديد من المكتبات الممتازة التي يمكن أن تبسط العملية وتقدم المزيد من الميزات المتقدمة.

XState

XState هي مكتبة JavaScript شائعة لإنشاء وتفسير وتنفيذ آلات الحالة ومخططات الحالة. يوفر واجهة برمجة تطبيقات قوية ومرنة لتحديد آلات الحالة المعقدة، بما في ذلك دعم الحراس والإجراءات والحالات المتوازية والحالات الهرمية. يوفر XState أيضًا أدوات ممتازة لتصور وتصحيح أخطاء آلات الحالة.

مكتبات أخرى

تشمل الخيارات الأخرى:

• Robot: مكتبة خفيفة الوزن لإدارة الحالة مع التركيز على البساطة والأداء.
• react-automata: مكتبة مصممة خصيصًا لدمج آلات الحالة في مكونات React.

يعتمد اختيار المكتبة على الاحتياجات المحددة لمشروعك. يعد XState خيارًا جيدًا لآلات الحالة المعقدة، في حين أن Robot و react-automata مناسبان للسيناريوهات الأبسط.

أفضل الممارسات لاستخدام آلات الحالة

للاستفادة بفعالية من آلات الحالة في تطبيقات React الخاصة بك، ضع في اعتبارك أفضل الممارسات التالية:

• ابدأ صغيرًا: ابدأ بآلات حالة بسيطة وزد التعقيد تدريجيًا حسب الحاجة.
• تصور آلة الحالة الخاصة بك: استخدم أدوات التصور للحصول على فهم واضح لسلوك آلة الحالة الخاصة بك.
• اكتب اختبارات شاملة: اختبر كل حالة وانتقال بدقة للتأكد من أن نظامك يتصرف بشكل صحيح.
• وثق آلة الحالة الخاصة بك: قم بتوثيق حالات وانتقالات وحراس وإجراءات آلة الحالة الخاصة بك بوضوح.
• ضع في اعتبارك التدويل (i18n): إذا كان تطبيقك يستهدف جمهورًا عالميًا، فتأكد من أن منطق آلة الحالة وواجهة المستخدم الخاصة بك مُدولة بشكل صحيح. على سبيل المثال، استخدم آلات حالة منفصلة أو سياقًا للتعامل مع تنسيقات التاريخ أو رموز العملات المختلفة بناءً على لغة المستخدم.
• إمكانية الوصول (a11y): تأكد من أن انتقالات الحالة وتحديثات واجهة المستخدم الخاصة بك يمكن الوصول إليها للمستخدمين ذوي الإعاقة. استخدم سمات ARIA و HTML الدلالي لتوفير سياق وملاحظات مناسبة للتقنيات المساعدة.

الخلاصة

توفر خطافات React المخصصة جنبًا إلى جنب مع آلات الحالة نهجًا قويًا وفعالًا لإدارة منطق الحالة المعقد في تطبيقات React. من خلال تجريد انتقالات الحالة والتأثيرات الجانبية إلى نموذج محدد جيدًا، يمكنك تحسين تنظيم التعليمات البرمجية وتقليل التعقيد وتعزيز قابلية الاختبار وزيادة قابلية الصيانة. سواء قمت بتنفيذ الخطاف المخصص الخاص بك أو الاستفادة من مكتبة مثل XState، فإن دمج آلات الحالة في سير عمل React الخاص بك يمكن أن يحسن بشكل كبير من جودة وقابلية تطوير تطبيقاتك للمستخدمين في جميع أنحاء العالم.